import React, { Component } from 'react';

import { View, Text, StyleSheet, ScrollView, Modal, Image, TouchableOpacity, PixelRatio } from 'react-native';
import { GLOBAL } from '../config/global';
import { style } from '../theme/style';
import { OriginalAddress } from "../component/ui/OriginalAddress"



const scale = GLOBAL.SCALE;

export class ScrollViewTest extends Component {

	constructor(props) {
		super(props);
		this.state = {
			modalVisible: false
		}



	}

	componentWillMount = async () => {

	}

	_click = () => {
		this.setState({ modalVisible: true })
	}

	// 关闭弹框
	_closeModal = () => {
		this.setState({ modalVisible: false })
	}

	_addressCallback = (data) => {
		console.log("数据回调", data);
		this.setState({
			name: data.areaId + data.makePlace
		})
	}


	render() {
		let { modalVisible, name } = this.state;
		return <View style={styles.container}>
			<Text style={{ padding: 30 * scale }} onPress={() => { this._click() }}>131231 - {name}</Text>
			{
				modalVisible ? <OriginalAddress
					modalVisible={modalVisible}
					closeModal={this._closeModal}
					params={{ tradeType: 'I' }}
					addressCallback={this._addressCallback}
				/> : null
			}
		</View>
	}

}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		flexDirection: 'row'
	},
	pd: {
		paddingHorizontal: 25 * scale
	},
	scollContainer: {
		flex: 1,
		backgroundColor: 'rgba(0, 0, 0, .3)',
		justifyContent: 'flex-end'
	},
	scollBox: {
		width: "100%",
		//height: "80%",
		backgroundColor: "#fff",
		justifyContent: 'flex-end',
	},
	header: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		alignItems: 'center',
		paddingVertical: 20 * scale
	},
	headerTitle: {
		fontSize: 18 * scale
	},
	imgStyle: {
		width: 22 * scale,
		height: 22 * scale
	},
	togger: {
		flexDirection: 'row'
	},
	toggerText: {
		fontSize: 15 * scale,
		marginRight: 20 * scale
	},
	toggerTextActive: {
		color: style.color.themeColor,
	},
	hotBox: {
		marginTop: 10 * scale,
		marginRight: 30 * scale
	},
	hotTitle: {
		fontSize: 14 * scale,
		color: '#666',
		marginTop: 10 * scale
	},
	hotBody: {
		flexDirection: 'row',
		flexWrap: 'wrap',
		marginTop: 5 * scale,
		height: 70 * scale,
		overflow: 'hidden'
	},
	hotItem: {
		fontSize: 13 * scale,
		color: '#555',
		marginVertical: 8 * scale,
		marginRight: 25 * scale,
		backgroundColor: '#eee',
		paddingVertical: 3 * scale,
		paddingHorizontal: 10 * scale
	},
	body: {
		flexDirection: 'row',
		height: 350 * scale
	},
	letterBox: {
		backgroundColor: '#ccc',
		alignItems: 'center',
		justifyContent: 'center',
		position: 'absolute',
		right: 5 * scale,
		bottom: 30 * scale,
		paddingVertical: 5 * scale,
		borderRadius: 5 * scale,
		paddingHorizontal: 2 * scale
	},
	letterItem: {
		fontSize: 12 * scale
	},
	scrollTitle: {
		color: '#000',
		fontSize: 16 * scale
	},
	scrollChild: {
		borderTopWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderTopColor: style.color.border,
		marginTop: 5 * scale
	},
	scrollChildItem: {
		lineHeight: 30 * scale
	},
	scrollView: {
		marginTop: 10 * scale,
		marginRight: 35 * scale,
		paddingBottom: 20 * scale,
	}

})